<template>
	<!-- 潜客列表 -->
	<div v-if="!is_detail" class="content">
		<div class="content-top">
			潜客管理_潜客查询
		</div>
		<div class="content-operation">
			<el-button type="primary" icon="el-icon-plus" @click='is_add = true' v-if="has_add">添加潜客</el-button>
			<el-button type="primary" icon="el-icon-download" @click='export_data'>导出记录</el-button>
		</div>
		<div class="content-search">
			<el-form :inline="true" class="demo-form-inline" style="margin-top: 20px;">
				<el-form-item label="潜客名称">
					<el-input placeholder="潜客名称" clearable v-model="passengerName"></el-input>
				</el-form-item>
				<el-form-item label="手机号码">
					<el-input placeholder="手机号码" clearable v-model="passengerMobile"></el-input>
				</el-form-item>
				<el-form-item label="业务员">
					<el-input placeholder="业务员" clearable v-model="chineseName"></el-input>
				</el-form-item>

				<el-button type="primary" @click='search' icon="el-icon-search">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="content-table">
			<el-table :data="tableData" show-header stripe style="width: 100%;">
				<el-table-column prop="passengerName" label="潜客姓名" width="150">
				</el-table-column>
				<el-table-column prop="licensePlateNumber" label="车牌号码" width="100">
				</el-table-column>
				<el-table-column prop="areaName" label="区域名称" width="250">
				</el-table-column>
				<el-table-column prop="passengerMobile" label="手机号码" width="150">
				</el-table-column>
				<el-table-column prop="chineseName" label="业务员" width="100">
				</el-table-column>
				<el-table-column prop="passengerLevel" label="级别" width="100">
					<template slot-scope="scope">
						<span v-if="scope.row.passengerLevel == item.value" v-for='item in dict.passengerLevel'>{{item.type}}</span>
					</template>
				
				</el-table-column>
				<el-table-column prop="estimatedPurchaseTime" label="预计采购时间" width="130">
				</el-table-column>
				<el-table-column prop="vehicleRegistrationDate" label="车辆注册日期" width="130">
				</el-table-column>
				<el-table-column prop="visit" label="回访记录" width="300">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" v-if="has_edit" type="text" size="small"><i class="el-icon-edit"></i>查看详情</el-button>
						<el-button @click="handleClick1(scope.row)" v-if="has_del" type="text" size="small"><i class="el-icon-delete"></i></el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size=limit layout="prev, pager, next, jumper" :total=total>
			</el-pagination>
		</div>
		<template v-if="is_add">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CrmPassengerAdd @saveAdd='saveAdd' :type='0'></CrmPassengerAdd><!-- type 0主管  1我的 -->
			</div>
		</template>

	</div>
	<div v-else class="content">
		<div class="content-top">
			潜客管理_潜客详情
		</div>
		<div class="qianke-title">
			<div class="qianke-title-left">基本信息</div>
			<div class="qianke-title-right" @click="is_edit = true"><i class="el-icon-edit"></i>修改</div>
		</div>
		<div class="qianke-detail">
			<el-row>
				<el-col :span="8">客户姓名：{{info.passengerName}}</el-col>
				<el-col :span="8">客户类型：<template v-if="item.value == info.passengerType" v-for='item in dict.passengerType'>{{item.type}}
					</template></el-col>
				<el-col :span="8">手机号：{{info.passengerMobile}}</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">区域：{{info.areaName}}</el-col>
				<el-col :span="8">业务员：{{info.chineseName}}</el-col>
				<el-col :span="8">是否运营车：<template v-if="item.value == info.isOperationCar" v-for='item in dict.property'>{{item.type}}
					</template></el-col>
			</el-row>
			<el-row>
				<el-col :span="8">需求说明：{{info.requirement}}</el-col>
				<el-col :span="8">车辆注册日期：{{info.vehicleRegistrationDate}}</el-col>
				<el-col :span="8">级别：<template v-if="item.value == info.passengerLevel" v-for='item in dict.passengerLevel'>{{item.type}}
					</template></el-col>
			</el-row>
		</div>
		<div class="qianke-title">
			<div class="qianke-title-left">回访记录</div>
			<div class="qianke-title-right" @click="is_fangwen = true"><i class="el-icon-edit"></i>修改</div>
		</div>
		<div class="qianke-fangwen">
			<div class="qianke-famgwen-item">
				<div class="qianke-fangwen-left">首次拜访记录：</div>
				<div class="qianke-fangwen-right">
					<template v-for="item in frist_list">
						<div class="fangwen-time">{{item.firstTimeVisitDate}}</div>
						<div>{{item.firstTimeVisit}}</div>
					</template>

				</div>
			</div>
			<div class="qianke-famgwen-item">
				<div class="qianke-fangwen-left">三日回访记录：</div>
				<div class="qianke-fangwen-right">
					<template v-for="item in three_list">
						<div class="fangwen-time">{{item.threeDaysVisitDate}}</div>
						<div>{{item.threeDaysVisit}}</div>
					</template>
				</div>
			</div>
			<div class="qianke-famgwen-item">
				<div class="qianke-fangwen-left">一周回访记录：</div>
				<div class="qianke-fangwen-right">
					<template v-for="item in week_list">
						<div class="fangwen-time">{{item.weekVisitDate}}</div>
						<div>{{item.weekVisit}}</div>
					</template>
				</div>
			</div>
			<div class="qianke-famgwen-item">
				<div class="qianke-fangwen-left">一月回访记录：</div>
				<div class="qianke-fangwen-right">
					<template v-for="item in month_list">
						<div class="fangwen-time">{{item.monthVisitDate}}</div>
						<div>{{item.monthVisit}}</div>
					</template>
				</div>
			</div>


		</div>
		<div class="qianke-title">
			<center>
				<el-button type="primary" @click='show_list'><i class="el-icon-back"></i></el-button>
			</center>
		</div>
		<template v-if="is_edit">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CrmPassengerEdit @saveEdit='saveEdit' :type='0' :id='id'></CrmPassengerEdit> <!-- type 0主管  1我的 -->
			</div>
		</template>
		<template v-if="is_fangwen">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CrmPassengerFangwen @saveFangwen='saveFangwen' :id='id'></CrmPassengerFangwen>
			</div>
		</template>
	</div>
</template>

<script>
	import CrmPassengerAdd from '@/components/crmpassenger/CrmPassengerAdd.vue'
	import CrmPassengerEdit from '@/components/crmpassenger/CrmPassengerEdit.vue'
	import CrmPassengerFangwen from '@/components/crmpassenger/CrmPassengerFangwen.vue'
	import Global from '@/components/Global.vue'
	let _this;
	export default {
		components: {
			CrmPassengerAdd: CrmPassengerAdd,
			CrmPassengerEdit: CrmPassengerEdit,
			CrmPassengerFangwen: CrmPassengerFangwen
		},
		props: ['power'],
		data() {
			return {
				id: 'id',
				is_add: false,
				is_edit: false,
				is_detail: false,
				is_fangwen: false,
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				has_add: false,
				has_edit: false,
				has_del: false,
				info: '',
				dict: '',
				frist_list: [],
				three_list: [],
				week_list: [],
				month_list: [],
				passengerName: '',
				passengerMobile:'',
				chineseName:''
			}
		},
		created() {
			_this = this;
		},
		mounted() {
			this.check_power();
			this.get_dict();
			this.get_list();
		},
		methods: {
			export_data() {

				this.$axios.get(this.$global.serverIp + 'crm/crmPassenger/excel/down', {
						responseType: 'blob' //告诉服务器我们需要的响应格式
					})
					.then(res => {
						let blob = new Blob([res.data], {
							type: 'application/vnd.ms-excel' //将会被放入到blob中的数组内容的MIME类型 
						});
						let objectUrl = URL.createObjectURL(blob); //生成一个url
						window.location.href = objectUrl; //浏览器打开这个url
					})
					.catch(err => {
						console.log(err);
					})

			},
			/*
			点击搜索按钮
			*/
			search() {
				this.page = 1;
				this.get_list();
			},
			show_list() {
				this.info = {};
				this.frist_list = [];
				this.three_list = [];
				this.week_list = [];
				this.month_list = [];
				this.is_detail = false;
			},
			check_power() {
				this.power.forEach(function(element) {
					if (element.permissionName.indexOf("添加") != -1) _this.has_add = true;
					if (element.permissionName.indexOf("编辑") != -1) _this.has_edit = true;
					if (element.permissionName.indexOf("删除") != -1) _this.has_del = true;
				});
			},
			get_dict() {
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=crmPassenger')
					.then(function(res) {
						if (res != '')
							_this.dict = res.data;
					})
			},
			get_list() {
				this.$axios.post(this.$global.serverIp + 'crm/crmPassenger/findPageAll', {
						"limit": _this.limit + "",
						"page": _this.page + "",
						"passengerName": _this.passengerName,
						"passengerMobile": _this.passengerMobile,
						"chineseName":_this.chineseName,
						"paginationFlag": true
					})
					.then(function(res) {
						if (res != '') {
							_this.tableData = res.data.list;
							_this.total = res.data.totalCount;
							_this.page = res.data.currPage;
						}
					})

			},
			saveFangwen(type) {
				if (type == 2) {
					this.get_fangwen_list();
				}
				this.is_fangwen = false;
			},
			saveAdd(type) {
				if (type == 2) {
					this.get_list();
				}
				this.is_add = false;
			},
			saveEdit(type) {
				this.is_edit = false;
				this.get_info();
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
			handleClick(row) {
				console.log(row.name);
				this.id = row.id;
				this.is_detail = true;
				this.get_info();
				// this.is_edit = true;
			},
			get_info() {
				this.$axios.get(this.$global.serverIp + 'crm/crmPassenger/detail?id=' + this.id)
					.then(function(res) {
						if (res != '') {
							_this.info = res.data;
							_this.get_fangwen_list();
						}
					});
			},
			get_fangwen_list() {
				this.$axios.get(this.$global.serverIp + 'crm/crmvisitrecords/findAll/' + this.id)
					.then(function(res) {
						if (res != '') {
							_this.frist_list = [];
							_this.three_list = [];
							_this.week_list = [];
							_this.month_list = [];
							var length = res.data.length;
							for (var i = 0; i < length; i++) {
								if (res.data[i].visitType == 1) {
									_this.frist_list.push(res.data[i]);
								} else if (res.data[i].visitType == 3) {
									_this.three_list.push(res.data[i]);
								} else if (res.data[i].visitType == 7) {
									_this.week_list.push(res.data[i]);
								} else if (res.data[i].visitType == 30) {
									_this.month_list.push(res.data[i]);
								}
							}
						}
					})

			},
			handleClick1(row) {
				this.delopen(row);
			},
			delopen(row) {
				this.$confirm('此操作将删除该潜客, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					$.ajax({
						url: Global.serverIp + 'crm/crmPassenger/delete',
						data: '["' + row.id + '"]',
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {
							request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('token'));
						},
						contentType: 'application/json;charset=utf-8',
						dataType: 'json',
						type: 'delete',
						success: function(res) {
							if (res.code == Global.success_code) {
								console.log(res);
								_this.$popup.open("删除成功");
								_this.get_list();
							} else {
								_this.$popup.open(res.msg);
							}
						},
						error: function(res) {
							if (res.responseJSON.code == '040005') {
								_this.$popup.open("登录过期");
							} else {
								_this.$popup.open("请求失败");
							}
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
		},

	}
	import '@/assets/css/common.css'
</script>
<style>
	.qianke-title {
		margin: 26px 0px 0px 30px;
		overflow: hidden;
		font-size: 16px;
		width: 1088px;
	}

	.qianke-title-left {
		float: left;
		color: #606B82;
		margin-bottom: 16px;
	}

	.qianke-title-right {
		float: right;
		color: #FD943F;
		margin-bottom: 10px;
	}

	.qianke-title-right:hover {
		cursor: pointer;
		opacity: 0.3;
	}

	.qianke-detail {
		width: 1088px;
		height: 188px;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		padding-left: 30px;
		box-sizing: border-box;
		margin-left: 30px;
		padding-top: 40px;
	}

	.qianke-detail .el-row {
		margin-bottom: 30px;
		font-size: 14px;
		color: #2D384C;
	}

	.qianke-fangwen {
		width: 1088px;
		min-height: 188px;
		max-height: 500px;
		overflow: auto;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		padding: 40px 30px;
		box-sizing: border-box;
		margin-left: 30px;
	}

	.qianke-famgwen-item {
		overflow: auto;
		border-bottom: 1px dashed #eee;
		padding-bottom: 24px;
		margin-top: 24px;
	}

	.qianke-fangwen-left {
		font-size: 14px;
		color: #FD943F;
		float: left;
		margin-right: 10px;
	}

	.qianke-fangwen-right {
		font-size: 14px;
		color: #2D384C;
		float: left;
		width: 80%;

	}

	.fangwen-time {
		color: #606B82;
	}
</style>
